<template>
	<view>
		<view class="title" >
			<h2 style="text-align: center;">注册新用户</h2>
		</view>
		<form @submit="registerUser" @reset="resetForm">
			<view class="username" style="height: 50px;margin-bottom: 20px;">
				<span>输入用户名:</span>
				<input type="text" placeholder="" style="height: 50px;font-size: 1.1em;" v-model="userRegisterForm.username">
			</view>
			<view class="password" style="height: 50px;margin-bottom: 20px;">
				<span>输入密码:</span>
				<input type="password" placeholder="请输入密码" style="height: 50px;font-size: 1.1em;" v-model="password1">
			</view>
			<view class="password" style="height: 50px;margin-bottom: 20px;">
				<span>再次确认密码:</span>
				<input type="password" placeholder="请再次输入密码" style="height: 50px;font-size: 1.1em;" v-model="passwordAgian">
			</view>
			<view class="page-section page-section-gap"style="height: 50px;margin-bottom: 150px;">
			        <view class="page-section-title" style="margin-bottom:20px;">请选择身份</view>
			        <radio-group name="radio" @change="radioChange($event)">
			          <label><radio value="teacher"/>教师</label>
			          <label><radio value="student"/>学生</label>
			        </radio-group>
			</view>
			<button form-type="submit" type="primary">Submit</button>
			<button form-type="reset">Reset</button>
		</form>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userRegisterForm:{
					username:'',
					password:'',
					teacher:''
				},
				password1:'',
				passwordAgian:''
				
			}
		},
		methods: {
			async registerUser(){
				if(this.password1 !== this.passwordAgian){
					alert('两次密码不一致')
					this.password1 = ''
					this.passwordAgian=''
				}else{
					this.userRegisterForm.password = this.password1
					console.log(this.userRegisterForm)
					let res = await this.$axios.post(`/api/users/register`,this.userRegisterForm)
					console.log(res)
					if(res.code===200){
						this.resetForm()
						uni.navigateBack({
							delta: 1
						})
					}
				}
			},
			resetForm(){
				console.log('reset')
			},
			radioChange($event){
				console.log()
				if($event.detail.value==='teacher'){
					this.userRegisterForm.teacher = true
				}else{
					this.userRegisterForm.teacher = false
				}
				
			}
		}
	}
</script>

<style>

</style>
